---
title: BackgroundRenderer 背景渲染器
icon: Layers
relatedFile: app/src/core/render/canvas2d/utilsRenderer/backgroundRenderer.tsx
---

这个服务用于渲染不同类型的背景，例如点状网格、水平线、垂直线以及笛卡尔坐标系。它基于 `Project` 实例，通过 `Project` 实例访问渲染器、相机和样式管理器来绘制背景元素。

## API

### `renderDotBackground(viewRect: Rectangle)`

用于绘制洞洞板式的背景。

-   基于当前缩放级别计算点之间的间距。
-   根据 `viewRect` 定义的可见区域，遍历计算出的 x 和 y 坐标。
-   对于每个坐标点，使用 `project.shapeRenderer.renderCircle` 绘制一个圆形。
-   点的颜色根据其是否位于坐标轴（x=0 或 y=0）上而有所不同，使用 `GridNormal` 或 `GridHeavy` 样式。

### `renderHorizonBackground(viewRect: Rectangle)`

用于绘制水平线条式的背景。

-   基于当前缩放级别计算线条之间的间距。
-   根据 `viewRect` 定义的可见区域，遍历计算出的 y 坐标。
-   对于每个 y 坐标，绘制一条从 `viewRect.left` 到 `viewRect.right` 的水平线。
-   线条的颜色根据其是否位于 x 轴（y=0）上而有所不同，使用 `GridNormal` 或 `GridHeavy` 样式。

### `renderVerticalBackground(viewRect: Rectangle)`

用于绘制垂直线条式的背景。

-   基于当前缩放级别计算线条之间的间距。
-   根据 `viewRect` 定义的可见区域，遍历计算出的 x 坐标。
-   对于每个 x 坐标，绘制一条从 `viewRect.top` 到 `viewRect.bottom` 的垂直线。
-   线条的颜色根据其是否位于 y 轴（x=0）上而有所不同，使用 `GridNormal` 或 `GridHeavy` 样式。

### `renderCartesianBackground(viewRect: Rectangle)`

用于绘制平面直角坐标系背景。

-   绘制 x 轴和 y 轴，颜色使用 `GridNormal` 样式。
-   基于当前缩放级别计算刻度之间的间距。
-   在 x 轴上绘制刻度值，刻度文本的 y 坐标会根据渲染区域进行调整，确保可见性。
-   在 y 轴上绘制刻度值，刻度文本的 x 坐标会根据渲染区域进行调整，确保可见性。
-   刻度文本的颜色使用 `GridNormal` 样式。

### `getCurrentGap(): number`

计算并返回当前视图缩放级别下背景网格的合适间距。

-   初始间距设定为 50。
-   如果当前相机缩放比例小于 1，则会循环将 `currentGap` 翻倍，直到 `currentGap` 乘以当前缩放比例大于或等于 `gap - 1`，以确保在缩放时网格线不会过于密集。

### `getLocationXIterator(viewRect: Rectangle, currentGap: number): IterableIterator<number>`

生成一个迭代器，用于遍历 `viewRect` 范围内所有需要绘制背景元素的 x 坐标。

-   从 `viewRect.location.x` 开始，并将其调整为 `currentGap` 的倍数。
-   每次迭代增加 `currentGap`，直到超出 `viewRect.right`。

### `getLocationYIterator(viewRect: Rectangle, currentGap: number): IterableIterator<number>`

生成一个迭代器，用于遍历 `viewRect` 范围内所有需要绘制背景元素的 y 坐标。

-   从 `viewRect.location.y` 开始，并将其调整为 `currentGap` 的倍数。
-   每次迭代增加 `currentGap`，直到超出 `viewRect.bottom`。
